.preload {
    display        : flex;
    height         : 50px;
    justify-content: center;
    align-items    : center;

    text {
        display          : block;
        width            : 9px;
        height           : 5px;
        background       : coral;
        -webkit-animation: preload 1.5s infinite ease-in-out;
        animation        : preload 1.5s infinite ease-in-out;

        +text {
            margin-left: 2px;
        }
    }

    text:nth-child(2) {
        -webkit-animation-delay: .2s;
        animation-delay        : .2s;
    }

    text:nth-child(3) {
        -webkit-animation-delay: .4s;
        animation-delay        : .4s;
    }

    text:nth-child(4) {
        -webkit-animation-delay: .6s;
        animation-delay        : .6s;
    }

    text:nth-child(5) {
        -webkit-animation-delay: .8s;
        animation-delay        : .8s;
    }

}

@keyframes preload {
    0% {
        height    : 5px;
        background: coral;
    }

    25% {
        height    : 30px;
        background: cornflowerblue;
    }

    50% {
        height    : 5px;
        background: cornflowerblue;
    }

    100% {
        height    : 5px;
        background: coral;
    }
}